<template>
	<view>
		<view class="zhuangtxz">
			<view :class="ztxz==-1?'yixuan':'weix'" @click="xuanzzt(-1)">全部</view>
			<view :class="ztxz==0?'yixuan':'weix'" @click="xuanzzt(0)">待付款</view>
			<view :class="ztxz==1?'yixuan':'weix'" @click="xuanzzt(1)">待收货</view>
			<view :class="ztxz==2?'yixuan':'weix'" @click="xuanzzt(2)">已完成</view>
			<view :class="ztxz==3?'yixuan':'weix'" @click="xuanzzt(3)">已取消</view>
		</view>
		<!-- 列表 -->
		<view class="neirongk" v-if="ztxz != -1">
			<view class="forlieb" v-for="item in ddlist" v-if="item.ddzt==ztxz">
				<view class="ddhao">
					<view>{{item.ddsj}}</view>
					<view>{{item.ddzt==0?'待付款':item.ddzt==1?'待收款':item.ddzt==2?'已完成':'已取消'}}</view>
				</view>
				<view class="ddneir" v-for="(sp,index) in item.ddsp">
					<image class="cptupian" :src="sp.sptp"></image>
					<view class="cpxinx">
						<view class="spname">{{sp.spcm}}</view>
						<view class="skux">{{sp.sku}}</view>
					</view>
					<view class="shuljg">
						<view class="jge">
							<view>￥</view>
							<view class="cpjiag">{{sp.spjg}}</view>
						</view>
						<view class="shul">×{{sp.spsl}}</view>
					</view>
				</view>
				<view class="gongn">
					<view>共计1件</view>
					<view>合计￥1899</view>
				</view>
				<view class="gongn">
					<view class="anniu" v-if="item.ddzt==0">删除</view>
					<view class="anniu" v-if="item.ddzt==0">付款</view>
					<view class="anniu" v-if="item.ddzt==1">查看物流</view>
					<view class="anniu" v-if="item.ddzt==2">评价</view>
					<view class="anniu" v-if="item.ddzt==2">再次购买</view>
				</view>
			</view>
		</view>
		<view class="neirongk" v-else>
			<view class="forlieb" v-for="item in ddlist">
				<view class="ddhao">
					<view>{{item.ddsj}}</view>
					<view>{{item.ddzt==0?'待付款':item.ddzt==1?'待收款':item.ddzt==2?'已完成':'已取消'}}</view>
				</view>
				<view class="ddneir" v-for="(sp,index) in item.ddsp">
					<image class="cptupian" :src="sp.sptp"></image>
					<view class="cpxinx">
						<view class="spname">{{sp.spcm}}</view>
						<view class="skux">{{sp.sku}}</view>
					</view>
					<view class="shuljg">
						<view class="jge">
							<view>￥</view>
							<view class="cpjiag">{{sp.spjg}}</view>
						</view>
						<view class="shul">×{{sp.spsl}}</view>
					</view>
				</view>
				<view class="gongn">
					<view>共计1件</view>
					<view>合计￥1899</view>
				</view>
				<view class="gongn">
					<view class="anniu" v-if="item.ddzt==0">删除</view>
					<view class="anniu" v-if="item.ddzt==0">付款</view>
					<view class="anniu" v-if="item.ddzt==1">查看物流</view>
					<view class="anniu" v-if="item.ddzt==2">评价</view>
					<view class="anniu" v-if="item.ddzt==2">再次购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ztxz:-1,
				ddlist:[{
					ddsj:'2022-01-18 9:51:33',
					ddzt:0,
					ddsp:[{
						sptp:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.juimg.com%2Ftuku%2Fyulantu%2F140110%2F328704-14011019344655.jpg&refer=http%3A%2F%2Fimg.juimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643849384&t=7ec8764ec21e5b90f1be516aa5399b83',
						spcm:'沙宣去屑洗发水',
						sku:'450ml',
						spjg:1899.00,
						spsl:1
					}]
				},{
					ddsj:'2022-01-19 9:51:33',
					ddzt:2,
					ddsp:[{
						sptp:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.juimg.com%2Ftuku%2Fyulantu%2F140110%2F328704-14011019344655.jpg&refer=http%3A%2F%2Fimg.juimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643849384&t=7ec8764ec21e5b90f1be516aa5399b83',
						spcm:'沙宣去屑洗发水',
						sku:'450ml',
						spjg:1899.00,
						spsl:1
					},{
						sptp:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-ucdn-static.helijia.com%2Fzmw%2Fupload%2F20151024%2Fc72cd09a25e8406eab7e3caef65af960.png%211024&refer=http%3A%2F%2Fimg-ucdn-static.helijia.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643849384&t=f374144ec5b2ae6b35903903f48e5aad',
						spcm:'护发素',
						sku:'450ml',
						spjg:899.00,
						spsl:2
					}]
				}]
			}
		},
		methods: {
			xuanzzt(zt){
				this.ztxz = zt
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zhuangtxz{
		width: 710rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 28rpx;
		.yixuan{
			padding: 10rpx 10rpx 5rpx 10rpx;
			font-weight: bold;
			border-bottom: solid 5rpx #ff007f;
		}
		.weix{
			padding: 10rpx;
		}
	}
	.neirongk{
		width: 710rpx;
		padding: 20rpx;
		.forlieb{
			padding: 20rpx;
			background: #f0f0f0;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.ddhao{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				margin-bottom: 20rpx;
				color: #808080;
			}
			.ddneir{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				// align-items: center;
				.cptupian{
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}
				.cpxinx{
					width: 360rpx;
					.spname{
						width: 360rpx;
						font-weight: bold;
						display: block;
						overflow: hidden;
						white-space: nowrap;
						text-overflow:ellipsis;
					}
					.skux{
						font-size: 26rpx;
						color: #808080;
						margin-top: 20rpx;
					}
				}
				.shuljg{
					width: 150rpx;
					font-size: 25rpx;
					color: #808080;
					// text-align: right;
					.jge{
						color: #111111;
						display: flex;
						align-items: flex-end;
						.cpjiag{
							font-size: 30rpx;
							font-weight: bold;
						}
					}
					.shul{
						margin-top: 10rpx;
						font-size: 28rpx;
					}
				}
			}
			.gongn{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.anniu{
					padding: 10rpx 20rpx 10rpx 20rpx;
					border: solid 1rpx #cacaca;
					border-radius: 30rpx;
					font-size: 26rpx;
					color: #808080;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>
